<template>
  <div class="detail-container">
    <!-- 简介 -->
    <Synopsis :id="portfolioId" title="组合简介" :content="description"></Synopsis>
    <!-- 策略池 -->
    <strategy-pool title="ETF策略池" emptyText="暂无ETF推荐，请持续关注"></strategy-pool>
    <!-- 客服组件 -->
    <customer-service></customer-service>
    <!-- 订阅 -->
    <Subscribe :projectId="projectId" :isHome="false"></Subscribe>
  </div>
</template>

<script>
import { PORTFOLIO_LIST } from '@/config/portfolio';
import StrategyPool from '@/components/portfolio/StrategyPool.vue';
import CustomerService from '@/components/common/CustomerService';
import Synopsis from '@/components/Synopsis.vue';
import Subscribe from '@/components/Subscribe.vue';
import tools from '@/lib/tools.js';

export default {
  components: {
    Subscribe,
    Synopsis,
    StrategyPool,
    CustomerService,
  },
  data() {
    return {
      portfolioId: '',
      projectId: 0,
      description: '',
    };
  },
  created() {
    this.portfolioId = window.getParam('portfolio_id');
    this.projectId = Number(window.getParam('project_id'));
    this.description =
      PORTFOLIO_LIST[window.getParam('product')][this.portfolioId].desc || '--';
    tools.setTitle(PORTFOLIO_LIST[window.getParam('product')][this.portfolioId].name || 'ETF组合');
  },
};
</script>

<style lang="less" scoped>
.detail-container {
  background: var(--bg-color-1);
  padding: 8px 6px;
}
</style>
